var vm = new Vue({
    el: '#my_div',
    delimiters: ['[[',']]'],
    data: {
        token: '',
        user_head_img: '',
        occupation1 : {
            "信息技术": ["互联网", "IT", "通信", "电子", "游戏"],
            "金融保险": ["投资", "股票基金", "保险", "银行", "信托担保"],
            "商业服务": ["资讯", "贸易", "美容保健", "家政服务", "旅游", "餐饮酒店", "娱乐休闲", "批发零售", "汽车"],
            "建筑地产": ["房地产", "建筑", "物业", "装修"],
            "工程制造": ["机械制造", "生物医药", "食品", "服装", "能源", "化工"],
            "交通运输": ["航空", "铁路", "航运船舶", "公共交通", "物流运输"],
            "文化传媒": ["媒体出版", "设计", "广告创意", "动漫", "公关会展", "摄影"],
            "娱乐体育": ["影视", "运动体育", "音乐", "模特"],
            "公共事业": ["医疗", "教育", "政府机关", "科研", "公益机构", "农林牧渔"],
            "学生": ["学生"],
            "其他": ["其他"]
        },
        username: '',
        gender_radio: '',
        life_status_radio: '',
        year_option: '',
        month_option: '',
        day_option: '',
        job_option: '',
        occupation_option: '',
        signature: '',

    },
    mounted(){
        this.token = getCookie('token');
        this.getUserInfo()

    },
    methods: {
        getUserInfo(){
            var url = host + '/user/user_info/'
            axios.get(url,{
                headers: {
                    'Authorization': 'JWT ' + this.token
                },
                responseType: 'json',
                withCredentials:true,
            })
                .then(dat => {
                    this.user_head_img = dat.data.user_img.head_image;
                    this.username = dat.data.username;
                    this.gender_radio = dat.data.gender;
                    this.job_option = dat.data.job;
                    this.occupation_option = dat.data.occupation;
                    this.life_status_radio = dat.data.life_status;
                    if (dat.data.birthday){
                        var birthday = dat.data.birthday.split('-');
                        this.year_option = birthday[0];
                        this.month_option = parseInt(birthday[1]);
                        this.day_option = parseInt(birthday[2]);
                    }

                    this.signature = dat.data.signature;
                    var check_list = $("input[name='interest[]']");

                    for (let index = 0; index < check_list.length; index++) {
                        const element = check_list[index];

                        if (dat.data.hobby_list.indexOf(element.value) != -1) {
                            element.checked = true;
                        }
                    }
                    

                }).catch(err => {
                    console.log(err);
                    
                })
        },
        submit_user_info: function () {
            var url = host + '/user/user_info/';
            var hobby_list = [];
            var checked_list = $("input[name='interest[]']:checked");
            for (let index = 0; index < checked_list.length; index++) {
                const element = checked_list[index];
                hobby_list.push(element.value)
            }
            
            axios.put(url,{
                username: this.username,
                gender: parseInt(this.gender_radio),
                birthday: this.year_option + '-' + this.month_option + '-' + this.day_option,
                life_status: parseInt(this.life_status_radio),
                signature: $('#userexinfo-form-bio').val(),
                job: this.job_option,
                occupation: this.occupation_option,
                hobby_list: hobby_list,
                
            },
            {
                headers: {
                    'Authorization': 'JWT ' + this.token
                },
                responseType: 'json',
                withCredentials:true,
                
            })
                .then(dat => {
                    if (dat.data.code == 0) {
                        alert('保存成功');
                        window.location.reload();
                    }else{
                        alert(dat.data.errmsg)
                    }
                }).catch(err => {
                    console.log(err);
                    
                })
        },
        getFile(event){
            
            $("#img-cropper").toggle();
            $(".body-mask").toggle();
            const file = document.getElementById('fileUpload');
            const fileObj = file.files[0];

            const windowURL = window.URL || window.webkitURL;
            const img = document.getElementById('preview');

            if (file && fileObj){
                const dataURL = windowURL.createObjectURL(fileObj);
                img.setAttribute('src',dataURL)
            }

        },
        yes_img: function(){
            var oFiles = document.getElementById("fileUpload").files;
            var params = new FormData();
            params.append('file',oFiles[0]);
            
            console.log(params.get('file'));
            
            var url = host + '/user/head_img/';

            axios({
                method: 'post',
                url: url,
                headers: {
                    'Authorization': 'JWT ' + this.token,
                    'Content-type': 'application/x-www-form-urlencoded;charset=UTf-8'
                },
                data: params
            })                
                .then(dat => {
                    if (dat.data.code == 0) {
                        alert('修改成功');
                        window.location.reload();
                    }else{
                        alert(dat.data.errmsg);
                    }
                }).catch(err => {
                    console.log(err);
                    
                })
        },
    },

})